<template>
  <div class="example-container">
    <!-- 模拟交易页面头部 -->
    <div class="trading-header">
      <div class="currency-selector-trigger" @click="showCurrencySelector = true">
        <div class="current-currency">
          <span class="currency-symbol">{{ currentCurrency.symbol }}</span>
          <span class="currency-pair">/USDT</span>
        </div>
        <div class="dropdown-icon">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
            <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>
      
      <div class="price-info">
        <div class="current-price">{{ currentCurrency.price }}</div>
        <div 
          :class="[
            'price-change',
            currentCurrency.change >= 0 ? 'positive' : 'negative'
          ]"
        >
          {{ currentCurrency.change >= 0 ? '+' : '' }}{{ currentCurrency.change }}%
        </div>
      </div>
    </div>

    <!-- 币种选择器 -->
    <CurrencySelector 
      v-model:show="showCurrencySelector"
      @select="handleCurrencySelect"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CurrencySelector from './index.vue'

const showCurrencySelector = ref(false)
const currentCurrency = ref({
  symbol: 'BTC',
  price: '117998',
  change: -0.11
})

const handleCurrencySelect = (currency) => {
  currentCurrency.value = currency
  console.log('切换到币种:', currency.symbol)
}
</script>

<style lang="scss" scoped>
.example-container {
  max-width: 400px;
  margin: 20px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.trading-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.currency-selector-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 16px;
  
  &:hover {
    background: #e9ecef;
  }
}

.current-currency {
  display: flex;
  align-items: center;
  gap: 4px;
}

.currency-symbol {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.currency-pair {
  font-size: 14px;
  color: #666;
}

.dropdown-icon {
  color: #666;
  transition: transform 0.2s ease;
}

.currency-selector-trigger:hover .dropdown-icon {
  transform: rotate(180deg);
}

.price-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.current-price {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}

.price-change {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  
  &.positive {
    background: #e8f5e8;
    color: #52c41a;
  }
  
  &.negative {
    background: #fff2f0;
    color: #ff4d4f;
  }
}
</style> 